<template>
 <div id="user">
    <div class="top">
            <h3 class="myuserhead">个人中心</h3>
            <div class="space"></div>
            <div class="headPort">
                <div class="left">
                    <van-image
                    round
                    width="5rem"
                    height="5rem"
                    src="https://b.yzcdn.cn/vant/icon-demo-1126.png"
                    />
                </div>
                <div class="right">
                    <van-cell @click="loginBtn" title="点击登陆" is-link />
                </div>
            </div>
    </div>
    <!-- 宫格 -->
    <div class="grid">
            <van-grid :column-num="3" >
                <van-grid-item icon="orders-o" text="我的订单" />
                <van-grid-item icon="coupon-o" text="优惠卷" />      
                <van-grid-item icon="gift-card-o" text="礼品卡" />
                <van-grid-item icon="star-o" text="我的收藏" />
                <van-grid-item icon="location-o" text="我的足迹" />
                <van-grid-item icon="vip-card-o" text="会员福利" />
                <van-grid-item icon="location-o" to="/address" text="地址管理" />
                <van-grid-item icon="idcard" text="账号安全" />
                <van-grid-item icon="service-o" text="联系客服" />
                <van-grid-item icon="diamond-o" text="帮助中心" />
                <van-grid-item icon="records" text="意见反馈" />
            </van-grid>
    </div>
    <tab-btn></tab-btn>
 </div>
</template>
<script>
import tabBtn from '@/components/tabBtn.vue'
 export default {
     data(){
         return{
             
         }
     },
     methods:{
         loginBtn(){
             this.$router.push('/login')
         }
     },
     components:{
         tabBtn
     }
 }
 </script>
<style lang="less">
#user{
    .top{
        border-bottom: 1px solid #D6C9BD;
    }
    .headPort{
        margin-bottom: 20px;
        display: flex;
        .left{
            width: 30%;
        }
        .right{
            width: 70%;
            background-color: #D6C9BD !important;
            display: flex;
            .van-cell{
                display: flex;
                align-items: center;
                .van-cell__title{
                    span{
                        display: flex;
                        font-size: 15px;

                    }
                }
            }
        }

        
    }
    
    .myuserhead{
        margin: 10px 0;
        font-size: 16px;
        color: #321A05;
    }
    .space{
        height: 50px;
    }
    .grid{
        .van-grid{
            .van-grid-item{
                border-bottom:1px solid #D6C9BD; 
                border-right:1px solid #D6C9BD; 
            }
            
        }
    }
}
</style>